// 拿mock接口，拿server下发的数据
import { getMenu } from '@/api/dynamicRouter'

const state = {
  // 顶一个存储数据的空数组
  menu: [],
  // 当前激活的顶部tab
  activeIndex: null,
  // 侧边导航数组
  sideNavArr: []
}

const mutations = {
  SET_MENU: (state, data) => {  //通过下面的commit传回来的data是一个对象
    // 把拿回来的数据存储在menu里
    state.menu = data.menu
    state.activeIndex = data.activeIndex
    state.sideNavArr = data.sideNavArr
  },
  SET_ACTIVE_INDEX: (state, index) => {
    // 根据点击的index，跟随样式
    state.activeIndex = index
    // 切换顶部时，同时更改侧边栏
    state.sideNavArr = state.menu[index].children
  }
}

const actions = {
  // 获取menu （第一个方法vuex中的方法）
  getMenuList({ commit }) {
    return new Promise((resolve, reject) => {
      if (state.menu.length) {
        resolve()
      } else {
        // 第二个是获取数据（api中的getMenu）的方法
        getMenu().then(response => {
          // console.log(response)  //拿到api（server下发的数据)
          const { data } = response
          // 通过commit改变mutations数据
          commit('SET_MENU', {
            menu: data,  //把server数据放到state
            activeIndex: 0,  //默认显示顶部导航第一个
            sideNavArr: data[0].children  //默认显示侧边栏的第一个
          })
          resolve()
        }).catch(error => {
          reject(error)
        })
      }
    })
  },
  // 切换顶部tab时触发
  changeNav({ commit }, index) {
    commit('SET_ACTIVE_INDEX', index)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
